<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/plugins/chosen/chosen.css" rel="stylesheet" />
<link href="../css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet" />
<link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<link href="../css/animate.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
</head>
<body class="top-navigation">
	<div id="wrapper">
		<div id="page-wrapper" class="gray-bg dashbard-1">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" data-role="navigation"
					style="margin-bottom:0">
					<div class="navbar-header">
						<div class="minimalize-styl-2">
							<a class="btn btn-primary" href="main.html"><i
								class="fa fa-home"></i> 主页</a>
							<!-- ++++++++++++++++++++++++++++++++ -->
							<ol id="guide" class="breadcrumb m-l">
								<li><a>调度中心</a></li>
								<li><strong>任务单查询</strong></li>
							</ol>
							<!-- ################################ -->
						</div>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li><span class="text-muted welcome-message">欢迎使用Feces物流管理系统</span></li>
						<li><a href="login.html"><i class="fa fa-sign-out"></i>
								退出</a></li>
					</ul>
				</nav>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="col-lg-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<!-- ++++++++++++++++++++++++++++++++ -->
							<h5>任务单</h5>
							<!-- ################################ -->
							<div class="ibox-tools">
								<!-- ++++++++++++++++++++++++++++++++ -->
								<a class="collapse-link btn-link btn-sm"> 收起/展开<i
									class="fa fa-chevron-up"></i>
								</a>
								<!-- ################################ -->
							</div>
						</div>
						<div class="ibox-content">
							<!-- ++++++++++++++++++++++++++++++++ -->
							<table class="table table-striped table-bordered table-hover"
								id="order_list">
								<thead>
									<tr>
										<th>订单号</th>
										<th>任务单</th>
										<th>客户姓名</th>
										<th>投递地址</th>
										<th>商品名称</th>
										<th>商品数量</th>
										<th>要求完成日期</th>
										<th>任务类型</th>
										<th>任务状态</th>
									</tr>
								</thead>
								<tbody></tbody>
								<tfoot>
									<tr>
										<th>订单号</th>
										<th>任务单</th>
										<th>客户姓名</th>
										<th>投递地址</th>
										<th>商品名称</th>
										<th>商品数量</th>
										<th>要求完成日期</th>
										<th>任务类型</th>
										<th>任务状态</th>
									</tr>
								</tfoot>
							</table>
							<!-- ################################ -->
						</div>
					</div>
				</div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>任务单查询</h5>
								<div class="ibox-tools">
									<!-- ++++++++++++++++++++++++++++++++ -->
									<a class="btn-rounded btn-primary btn-sm"> 刷新<i
										class="fa fa-refresh"></i>
									</a> <a class="collapse-link btn-link btn-sm"> 收起/展开<i
										class="fa fa-chevron-up"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">
								<form method="post" id="query" class="form-horizontal"
									data-role="form">
									<div class="form-group">
										<label for="order-type" class="col-md-2 control-label ">任务类型</label>
										<div class="col-md-9">
											<select class="form-control" id="order-type">
												<option disabled>请选择任务类型</option>
												<option value="all">全部</option>
												<option value="new">新订</option>
												<option value="change">换货</option>
												<option value="return">退货</option>
												<option value="back">退订</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="task-status" class="col-md-2 control-label">任务状态</label>
										<div class="col-md-9">
											<select class="form-control" id="task-status">
												<option disabled>请选择任务状态</option>
												<option value="dispatched">已调度</option>
												<option value="allocatable">可分配</option>
												<option value="allocated">已分配</option>
												<option value="got">已领货</option>
												<option value="finished">完成</option>
												<option value="failed">失败</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="substation" class="col-md-2 control-label">选择分站</label>
										<div class="col-md-9">
											<select class="form-control" id="substation">
												<option disabled>请选择分站</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="query-range" class="control-label col-md-2">要求完成日期</label>
										<div class="input-daterange input-group col-md-9" id="finishdate">
											<input id="query-start" name="start" class="form-control"
												type="text" placeholder="请选择要求完成日期" required> <span
												class="input-group-addon"></span>
										</div>
									</div>

									<div class="form-group">
										<div class="col-md-4 col-md-offset-4">
											<input type="submit"
												class="btn btn-outline btn-primary btn-block" />
										</div>
									</div>

								</form>
								<table class="table table-striped table-bordered table-hover">
								</table>
								<!-- ################################ -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/jquery-2.1.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/plugins/chosen/chosen.jquery.js"></script>
	<script src="../js/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="../js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="../js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="../js/plugins/jeditable/jquery.jeditable.js"></script>
	<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../js/plugins/toastr/toastr.min.js"></script>
	<script src="../js/feces.js"></script>
	<script src="../js/plugins/pace/pace.min.js"></script>
	<script>
		$(function() {
			var dataURL = '../api/taskorder.json';
			var crudURL = '../api/taskorder';
			
			var convert = function(taskorder) {
				return [ taskorder.order.id, 
				         taskorder.task_number, 
				         taskorder.order.order_client.name,
				         taskorder.order.order_client.address,
				         taskorder.products[0].product.name,
				         taskorder.products[0].product_number,
				         null,
				         taskorder.task_type,
				         taskorder.task_state
						];
			};
			$('#order_list').dataTable({
				ajax : {	
					url : dataURL,
					dataSrc : function(response) {
						return response.data.map(convert);
					},
				},
				stateSave : true,
				createdRow : function(row, data, dataIndex) {
					$(row).data({
						id : data[0]
					});
				},
				

			});
			$('select').chosen();
			$('.input-daterange').datepicker({
				keyboardNavigation : false,
				forceParse : false,
				autoclose : true
			});
		});
		
		
	</script>
</body>
</html>